<template>
    <div>
        <el-container>
            <el-header>
                <div style="text-align: left">
                    <el-form :inline="true" :model="query" class="query-form" size="mini">
                        <el-form-item class="query-form-item">
                            <el-input  placeholder="角色名称"></el-input>
                        </el-form-item>
                        <el-form-item class="query-form-item">
                            <el-select  placeholder="状态">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="禁用" value="0"></el-option>
                                <el-option label="正常" value="1"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item>
                            <el-button-group>
                                <el-button type="danger" plain icon="el-icon-refresh" ></el-button>
                                <el-button type="danger" plain icon="search" >查询</el-button>
                                <el-button type="danger" plain @click.native="dialogAddRole=true">新增</el-button>
                            </el-button-group>
                        </el-form-item>
                    </el-form>
                    
                    <el-dialog title="添加角色" v-show="dialogAddRole">
                        <el-form >
                            <el-form-item label="名称：" :label-width="formLabelWidth">
                                <el-input v-model="name" autocomplete="off" ></el-input>
                            </el-form-item>
                            <el-form-item label="描述：" :label-width="formLabelWidth">
                                <el-input v-model="desc" autocomplete="off" ></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogAddRole = false">取 消</el-button>
                            <el-button type="danger" plain @click="addrole">确 定</el-button>
                        </div>
                    </el-dialog>

                <!--修改角色-->
                <el-dialog title="修改角色" :visible.sync="dialogUpdateRole">
                        <el-form >
                            <el-form-item label="名称：" :label-width="formLabelWidth">
                                <el-input v-model="update_role.name" autocomplete="off" ></el-input>
                            </el-form-item>
                            <el-form-item label="描述：" :label-width="formLabelWidth">
                                <el-input v-model="update_role.desc" autocomplete="off" ></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogUpdateRole = false">取 消</el-button>
                            <el-button type="danger" plain @click="updaterole">确 定</el-button>
                        </div>
                    </el-dialog>

                </div>
            </el-header>
            <el-divider></el-divider>
            <el-main>
                <div style="margin: 10px auto;">
                    <el-table
                        :data="role_list"
                        style="width: 100%">
                        <el-table-column
                        label="编号"
                        width="100"
                        prop="id">
                        
                        </el-table-column>
                        <el-table-column
                        label="姓名"
                        width="100"
                        prop="name">
                        
                        </el-table-column>
                        
                        <el-table-column
                        label="状态"
                        width="200"
                        prop="status">
                        
                        </el-table-column>
                        
                        <el-table-column
                        label="描述"
                        width="400"
                        prop="desc">
                        
                        </el-table-column>
                        <el-table-column label="操作" width="600">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                @click="toAuthorizations(scope.row)">授权</el-button>
                            <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-main>
            <el-footer>
                <!-- 分页 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="100">
                </el-pagination>
            </el-footer>
        </el-container>
        <!-- 角色分配权限 -->
        <div style="text-align: left">
            <el-dialog title="分配权限" :visible.sync="roleAuthenticate">
                <el-transfer 
                v-model="value" 
                :data="data"
                :titles="['所有权限', '分配的权限']"></el-transfer>
                
                <div slot="footer" class="dialog-footer">
                    <el-button @click="roleAuthenticate = false">取 消</el-button>
                    <el-button type="danger" plain @click="toAuthorizations">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        const generateData = _ => {
            const data = [];
            for (let i = 1; i <= 15; i++) {
            data.push({
                key: i,
                label: `备选项 ${ i }`,
                
            });
            }
            return data;
        };
        return {
            dialogAddRole: false,
            dialogUpdateRole:false,
            formLabelWidth: '120px',
            roleAuthenticate: false,
            data: generateData(),
            value: [],
            name: '',
            desc: '',
            current_page: 1,
            page_size: 5,
            role_list: [],
            update_role:{}
        }
    },
    methods: {
        
        handleEdit(index, row) {
            // 点击修改按钮，然后显示出 修改对话框
            this.dialogUpdateRole=true
            //还原角色数据
            this.update_role=row
        },
        handleDelete(index, row) {
            //完成该角色的删除

            this.axios({
                url:"/role/"+row.id+"/",
                method:"DELETE",
            }).then(resp=>{
                console.log(resp.data)
                alert("删除成功")
            }).catch(error=>{
                console.log(error)
                alert("删除失败")
            })

        },
        toAuthorizations(row) {
            this.roleAuthenticate = true
            console.log(this.value)
        },
        // 分页的方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },

        addrole(){
            //添加角色 
            this.axios({
                url:"/role/",
                method:"POST",
                data:{
                    name:this.name,
                    desc:this.desc
                }
            }).then(resp=>{
                console.log(resp.data)
            }).catch(error=>{
                console.log(error)
            })
        },
        updaterole(){
            //修改角色
            this.axios({
                url:"/role/"+this.update_role.id+"/",
                method:"PUT",
                data:{
                    name:this.update_role.name,
                    desc:this.update_role.desc,
                }
            }).then(resp=>{
                console.log(resp.data)
                this.dialogUpdateRole=false
            }).catch(error=>{
                console.log(error)
                this.dialogUpdateRole=false
            })
        }
        
    },
    created() {
        this.axios({
            url:"/role/",
            method:"GET",
        }).then(resp=>{
            console.log(resp.data)
            this.role_list=resp.data
        }).catch(error=>{
            console.log(error)
        })
    }
}
</script>

<style scoped>

</style>
